<template>
  <div class="">
	<!-- 引入菜单组件 -->
	<vNavlist />
	<!-- 教师数据 -->
	<div class="teacher">
		<p class="title">教师每月授课数据</p>	
		<div id="myChart"></div>
	</div>
  </div>
</template>

<script>
import vNavlist from "@/components/vNavlist.vue"
export default {
	name: 'vTeacher',
	mounted(){
		this.draImg()
	},
	components:{
		vNavlist
	},
	data () {
		return {
		}
	},
	methods:{
		draImg(){
			// 基于准备好的dom，初始化echarts实例
			let myChart = this.$echarts.init(document.getElementById("myChart"));
			console.log(myChart)
			// 绘制图表
			myChart.setOption({
				title: {
				  text: "散点图",
				  subtext: "纯属虚构",
				  left: "center"
				},
				xAxis: {},
				yAxis: {},
				series: [
				  {
					symbolSize: 20,
					data: [
					  [1, 8.04],
					  [2, 6.95],
					  [3, 7.58],
					  [4, 8.81],
					  [5, 8.33],
					  [6, 9.96],
					  [7, 7.24],
					  [8, 4.26],
					  [9, 14.84],
					  [10, 4.82],
					  [11, 5.68],
					  [12, 5.68]
					],
					type: "scatter"
				  }
				]
			});
		}
	}
}
</script>;

<style>
	.teacher{
		height: 500px;
		margin: 50px 10px;
		position: relative;
		background: #DDD;
	}
	.title{
		border-bottom: 4px solid white;
		line-height: 40px;
		font-weight: bold;
	}
	.teacher #myChart{
	  position: absolute;
	  top: 40px;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  margin: auto;
	  width: 700px;
	  height: 400px;
	}
</style>
